.field {
  margin: 0 0 25px;
  position: relative;
  clear: both;
}

.field_with_errors {
  label {
    color: #C12000;
  }

  input[type="text"],
  input[type="email"] {
    border: 1px solid #C12000;
  }

  p {
    margin-bottom: 25px;
    font-weight: 500;
    font-size: 12px;
    color: #C12000;
    text-transform: uppercase;
  }
}

label {
  float: left;
  color: #333;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
}

input[type="password"],
input[type="text"],
input[type="date"],
input[type="email"],
textarea {
  border: 1px solid #ccc;
  padding: 10px;
  width: 100%;
  margin: 5px 0;
  font-size: 14px;
  @include border-radius(3px);
  outline: none;
}

textarea {
  height: 182px;
  max-width: 100%;
}

.field {
  @include clearfix();
  width: 100%;
  @media (min-width: $br-mobile) {
    max-width: 582px;
  }


  &.short {
    @media (min-width: $br-mobile) {
      max-width: 304px;
    }

    input[type="text"],
    input[type="date"],
    input[type="email"] {
      width: 100%;
      display: block;
      clear: both;
    }
  }

  &.required {
    span {
      float: right;
      font-size: 13px;
      color: #666;
      &.drop_pin{
        @media (max-width: $br-mobile - 1) {
          display: block;
          float: left;
          width: 100%;
          margin: 2px 0 5px;
        }
      }
    }
  }
}

.radio-box {
  @include clearfix();
  @include display-flex();
  @include justify-content(center);
  padding: 15px 0;

  .custom-radio {
    margin: 0 0 0 20px;
    &:first-child {
      margin: 0;
    }
  }

  label {
    font-weight: 400;
    text-transform: none;
    position: relative;
    padding-left: 25px;
    line-height: 28px;
    cursor: pointer;

    span{
      position: absolute;
      top: 50%;
      left: 0;
      width: 20px;
      height: 20px;
      border: 1px solid $dark;
      border-radius: 50%;
      @include transform(translate(0,-50%));
      &:after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50%;
        height: 50%;
        border-radius: 50%;
        background: $cGreen;
        display: none;
        @include transform(translate(-50%,-50%));
      }
    }
  }

  input[type=radio] {
    display: none;
  }

  input[type=radio]:checked + label {
    span{
      &:after {
        display: block;
      }
    }
  }
}
